import { View } from '@tarojs/components'
import {
  useState,
  forwardRef,
  useImperativeHandle,
  type ReactElement,
} from 'react'

import './index.scss'

interface IProps {
  children: ReactElement
}

export interface IInit {
  a: number
  b: number
  changeBottom: (num: number) => void
}

const IpxFooter = forwardRef<IInit, IProps>(({ children }, ref) => {
  const [bottom, setBottom] = useState(0)

  function changeBottom(num: number) {
    setBottom(num)
  }

  useImperativeHandle(
    ref,
    () => ({
      changeBottom,
      a: 1,
      b: 2,
    }),
    []
  )

  return (
    <View className='ipx-footer' style={{ bottom: bottom + 'px' }}>
      {children}
    </View>
  )
})

export default IpxFooter
